appDisplay: Set running indicator dot offset via CSS

The offset was given as a hardcoded (physical) pixel value and did not
take scaling into account. This lead to it being shifted closer towards
the icon as the scale increased.

This now replaces the hardcoded value with a CSS property which
automatically includes the scale factor.

Further this allows simplifying some calculations that previously were
trying to counteract the hardcoded offset using margins by using the
intended offset directly.

With this the dot in the dash is also now placed at exactly the bottom
of the hover highlight, while previously there was an unintentional 1px
space.

Closes: https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/7488
Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3245>

diff --git a/data/theme/gnome-shell-sass/widgets/_app-grid.scss b/data/theme/gnome-shell-sass/widgets/_app-grid.scss
index fcada18a207ff1c1f5b0b3b270f08419fc3407e6..179b2d51e0d9db621fd3eab4718a8c0a5906c33d 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_app-grid.scss
+++ b/data/theme/gnome-shell-sass/widgets/_app-grid.scss
@@ -49,9 +49,9 @@ $app_folder_size: 720px;
   background-color: $system_fg_color;
 
   @if $contrast == 'high' {
-    margin-bottom: 4px;
+    offset-y: 4px;
   } @else {
-    margin-bottom: 2px;
+    offset-y: 6px;
   }
 }
 

diff --git a/data/theme/gnome-shell-sass/widgets/_dash.scss b/data/theme/gnome-shell-sass/widgets/_dash.scss
index 02323fcc6a05a6b26065b480bdc63bb0f7a96298..d73f9cada12e006b4bf12daa0aca1004ff29d620 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_dash.scss
+++ b/data/theme/gnome-shell-sass/widgets/_dash.scss
@@ -71,7 +71,7 @@ $dash_spacing: $base_margin * 0.5;
     // running app dot
     .app-grid-running-dot {
       // manually position the dot within the dash item
-      margin-bottom: $dash_padding + $dash_edge_offset - 3px; // 3px = size of dot (5px) subtracted from its translationY from appDisplay.js
+      offset-y: -$dash_padding;
     }
   }
 

diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index f107c44e91bc76672a08afa5289f9e3bee17622f..117a3864df11d8270c71e2022b187d2dbef07d1b 100644 (file)
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -3014,7 +3014,7 @@ export const AppIcon = GObject.registerClass({
             x_align: Clutter.ActorAlign.CENTER,
             y_align: Clutter.ActorAlign.END,
         });
-        this._dot.translationY = 8;
+        this._dot.connect('style-changed', () => this._updateDotStyle());
         this._iconContainer.add_child(this._dot);
 
         this.label_actor = this.icon.label;
@@ -3059,6 +3059,11 @@ export const AppIcon = GObject.registerClass({
         }
     }
 
+    _updateDotStyle() {
+        const themeNode = this._dot.get_theme_node();
+        this._dot.translationY = themeNode.get_length('offset-y');
+    }
+
     _updateRunningStyle() {
         if (this.app.state !== Shell.AppState.STOPPED)
             this._dot.show();